<div class="category-list-page">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>📑 产品类别管理</h2>
        <button class="btn btn-primary" onclick="categoryList.showAddDialog()">
            ➕ 添加类别
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="categoryTable" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="80">ID</th>
                        <th>类别名称</th>
                        <th width="100">父类别</th>
                        <th width="80">层级</th>
                        <th width="100">排序</th>
                        <th width="100">状态</th>
                        <th width="150">创建时间</th>
                        <th width="200">操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加/编辑类别对话框 -->
<div class="modal fade" id="categoryFormModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加类别</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="categoryForm">
                    <input type="hidden" id="categoryId">
                    
                    <div class="mb-3">
                        <label class="form-label">类别名称 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="categoryName" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">父类别</label>
                        <select class="form-select" id="parentId">
                            <option value="0">无（顶级类别）</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">排序序号</label>
                        <input type="number" class="form-control" id="sortOrder" value="0">
                        <small class="text-muted">数字越小越靠前</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">状态</label>
                        <select class="form-select" id="status">
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="categoryList.save()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/assets/js/pages/category-list.js?v=20251011-4"></script>

